<script setup>
import axios from "axios";
import {onMounted, ref} from "vue";
import storage from "../../util/storage.js";
import router from "../../router/index.js";
import {message} from "ant-design-vue";
import server from "../../config/server.js";

const columns = [
  {
    name: '名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    name: '时间',
    dataIndex: 'add_time',
    key: 'add_time',
  },
  {
    name: '分数',
    dataIndex: 'score',
    key: 'score',
  },
  {
    name: '题目数量',
    dataIndex: 'problem_num',
    key: 'problem_num',
  },
  {
    name: '正确数量',
    dataIndex: 'correct_num',
    key: 'correct_num',
  },
  {
    name: '错误数量',
    dataIndex: 'error_num',
    key: 'error_num',
  },
  {
    title: 'Action',
    key: 'action',
  },
];
const data = ref([])
const user = storage.get("user")
const loadData = () => {
  let url = `${server.apiBaseUrl}/zdppy_ampractice_practice`
  if (user.username) {
    url += "?username=" + user.username
  }
  axios({
    method: "get",
    url: url
  }).then(resp => {
    console.log("resp=", resp.data)
    console.log("resp=", resp.data.data.results)
    data.value = resp.data.data.results
  })
}

const onClickRedo = (record) => {
  console.log("redo=", record)
  storage.set("redo", record)
  router.push("/practice/redo")
}
const onErrorPracticeClick = (record) => {
  console.log("onErrorPracticeClick", record)
  if (record.error_num === 0) {
    message.warning("该次测试一个错题都没有！")
    return
  }
  storage.set("redo", record)
  router.push({path: "/practice/redo", query: {"type": "error"}})
}

const onDeleteClick = (record) => {
  axios({
    method: "delete",
    url: `${server.apiBaseUrl}/zdppy_ampractice_practice/` + record.id
  }).then(resp => {
    console.log("onDeleteClick", resp.data)
    loadData()
    message.success("删除练习题成功!")
  })
}

onMounted(() => {
  loadData()
})
</script>

<template>
  <a-table :columns="columns" :data-source="data">
    <template #headerCell="{ column }">
      <template v-if="column.key === 'action'">
        <span>
          操作
        </span>
      </template>
      <template v-else>
        <span>
          {{ column.name }}
        </span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <a-space wrap>
          <a-button type="primary" size="small" @click="onClickRedo(record)">重做</a-button>
          <a-button
              type="primary"
              size="small"
              class="bg-yellow-500"
              @click="onErrorPracticeClick(record)"
          >
            错题练习
          </a-button>
          <a-popconfirm
              title="您确定要删除吗？"
              ok-text="确认"
              cancel-text="取消"
              @confirm="onDeleteClick(record)"
          >
            <a-button
                type="primary"
                size="small"
                danger>
              删除
            </a-button>
          </a-popconfirm>
        </a-space>
      </template>
    </template>
  </a-table>
</template>

<style scoped>

</style>